<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <nav class="nav">
      <button data-path="/">index</button>
      <button data-path="/home">home</button>
      <button data-path="/about">about</button>
    </nav>
    <div class="router-view" style="height:200px; width: 200px; border:1px solid black;"></div>
  </div>
</body>
<script>
  const routes = [
    {
      path: '/',
      component: `
        <div class="index">index 页面</div>
      `
    },
    {
      path: '/home',
      component: `
        <div class="home">home 页面</div>
      `
    },
    {
      path: '/about',
      component: `
        <div class="about">about 页面</div>
      `
    },
  ]

  const routerview = document.querySelector('.router-view')
  const nav = document.querySelectorAll('.nav button')

  const metchRoute = (path) => {
    for (const route of routes) {
      // 找到对应key匹配的路由
      if (route.path === path) {
        // 渲染组件
        return routerview.innerHTML = route.component
      } else {
        // 找不到404
        routerview.innerHTML = '404 not found'
      }
    }
  }
  
  // 实现路由跳转
  nav.forEach(el => el.addEventListener('click', (e) => {
    const path = e.target.dataset.path
    window.history.pushState(null, null, path)
    metchRoute(path)
    // history没法像hash一样实现对地址改变的实时监控
    // 组件挂载需要和点击事件绑定在一起
    
    // 需要写大量的逻辑来监视路由的改变
    // 由于我们使用的是SPA（single page application）应用，刷新页面会丢失页面资源，导致404错误
    
    // 浏览器会任务我们请求的资源是路由匹配的路径，这样一般会出现404错误，也有可能出现其他怪异的错误，
    // 解决这个错误
    
    // 当开发项目时使用到了history模式时，需要和后端友好交流，这样可以帮助我们顺利使用histroy路由 ಠ_ಠ
  }))





</script>

</html>